<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的订单</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/assets/web/css/double.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/web/css/me.css"/>
    <script src="/assets/web/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="me_order">
    <div class="select-list">
        <ul class="clearfix">
            <li class="fl over">全部</li>
            <li class="fl">待付款</li>
            <li class="fl">已完成</li>
        </ul>
    </div>
    <div class="content-list">
        <ul>
            <li class="over all">


                @for(item in list){


                <div class="list">
                    <div class="title">
                        <h2>易知学社 ></h2>
                        <span>
									@if(item.state==0){
									 待付款
									@}
									@if(item.state==1){
									 已付款
									@}
								</span>
                    </div>
                    <div class="clearfix center">
                        <div class="fl left">
                            <img src="${item.course.cover}">
                        </div>
                        <div class="fr right">
                            <div class="">
                                <h3>${item.course.name}</h3>
                                <p>${item.course.intro}</p>
                            </div>
                            <p class="i">金额：<i>￥</i><i class="num">${item.amount}</i></p>
                        </div>
                    </div>
                    <div class="button clearfix">
                        @if(item.state==0){
                        <button type="button" class="fr color">付款</button>
                        <button type="button" class="fr">取消订单</button>
                        @}
                    </div>
                </div>
                @}
            </li>
            <li class="over all">
                @for(item in list){
                     @if(item.state==0){
				<div class="list">
					<div class="title">
						<h2>易知学社 ></h2>
						<span>
								 待付款
								</span>
					</div>
					<div class="clearfix center">
						<div class="fl left">
							<img src="${item.course.cover}">
						</div>
						<div class="fr right">
							<div class="">
								<h3>${item.course.name}</h3>
								<p>${item.course.intro}</p>
							</div>
							<p class="i">金额：<i>￥</i><i class="num">${item.amount}</i></p>
						</div>
					</div>
					<div class="button clearfix">

						<button type="button" class="fr color">付款</button>
						<button type="button" class="fr">取消订单</button>

					</div>
				</div>


                     @}
                @}
            </li>
            <li class="over all">
				@for(item in list){
				@if(item.state==1){
				<div class="list">
					<div class="title">
						<h2>易知学社 ></h2>
						<span>
								 已付款
								</span>
					</div>
					<div class="clearfix center">
						<div class="fl left">
							<img src="${item.course.cover}">
						</div>
						<div class="fr right">
							<div class="">
								<h3>${item.course.name}</h3>
								<p>${item.course.intro}</p>
							</div>
							<p class="i">金额：<i>￥</i><i class="num">${item.amount}</i></p>
						</div>
					</div>
					<div class="button clearfix">

					</div>
				</div>


				@}
				@}
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('.select-list li').click(function () {
            $(this).addClass('over').siblings('li').removeClass('over');
            $('.content-list li').removeClass('over').eq($(this).index()).addClass('over');
        })
    })
</script>
</body>
</html>
